<template>
    <div class="">
        <div v-for="(menu, index) in menus" :key="index" class="my-5">
            <h6 class="border-l-4 border-gray-600 pl-2 mb-3 text-sm">{{ menu.title }}</h6>
            <section class="flex ">
                <router-link
                    :to="m.to"
                    v-for="(m, n) in menu.items"
                    :key="n"
                    class="flex flex-col justify-center items-center w-28 h-20 border rounded-md shadow-sm mr-3 text-gray-700 hover:text-blue-500 text-base"
                >
                    <i class="text-3xl" :class="m.icon" aria-hidden="true"></i>
                    <span class="text-sm font-bold mt-1">{{ m.title }}</span>
                </router-link>
            </section>
        </div>
    </div>
</template>

<script>
const menus = [
    {
        title: '应用扩展',
        items: [{ title: '模块插件', to: '/system/module/index', icon: 'fa fa fa-cubes' }]
    },
    {
        title: '用户管理',
        items: [
            { title: '我的帐户', to: '/system/my/edit', icon: 'fas fa-eraser' },
            { title: '用户组管理', to: '/system/group/index', icon: 'fas fa-drum-steelpan' },
            { title: '服务套餐', to: '/system/package/index', icon: 'fas fa-disease' }
        ]
    },
    {
        title: '系统管理',
        items: [
            { title: '站点列表', to: '/admin', icon: 'fas fa-cube' },
            { title: '系统配置', to: '/system/config/edit', icon: 'fas fa-clinic-medical' }
        ]
    }
]
export default {
    data() {
        return {
            menus
        }
    }
}
</script>

<style></style>
